<template>
	<div class="relative">
		<template v-if="isEmpty">
			<slot name="skeleton" v-if="$slots.skeleton && status === LoadingStatusEnum.loading"></slot>
			<div
				v-if="status !== LoadingStatusEnum.none"
				class="inset-0 flex justify-center items-center min-h-[120px]">
				<slot v-if="status === LoadingStatusEnum.loading" name="loading">
					<!-- <base-loading-small-icon></base-loading-small-icon> -->
					<BaseLoadingCircle />
				</slot>
				<slot v-else-if="status === LoadingStatusEnum.error" name="error">
					<base-error @click="emits('reload')"></base-error>
				</slot>
				<slot v-else-if="status === LoadingStatusEnum.empty" name="empty">
					<base-empty :emptyImg="emptyImg"></base-empty>
				</slot>
			</div>
		</template>
		<slot v-else></slot>
	</div>
</template>

<script lang="ts" setup>
// import BaseLoadingCircle from '../loading-small-icon/index.vue'
import { BaseLoadingCircle } from '@/components/base'
import BaseError from '../error/index.vue'
import BaseEmpty from '../empty/index.vue'
import { computed } from 'vue'

enum LoadingStatusEnum {
	none,
	loading,
	empty,
	error,
	skeleton
}

const props = defineProps({
	loading: {
		type: Boolean,
		default: false
	},
	isEmpty: {
		type: Boolean,
		default: false
	},
	error: {
		type: Object,
		default: null
	},
	emptyImg: {
		type: String
	}
})

const status = computed(() => {
	if (props.loading) {
		return LoadingStatusEnum.loading
	} else if (props.isEmpty) {
		return LoadingStatusEnum.empty
	} else if (props.error) {
		return LoadingStatusEnum.error
	} else {
		return LoadingStatusEnum.none
	}
})

const emits = defineEmits(['reload'])
</script>
